$(function(){
      // 1.1 获取裁剪区域的 DOM 元素
  var $image = $('#image')
  // 1.2 配置选项
  const options = {
    // 纵横比
    aspectRatio: 1,
    // 指定预览区域
    preview: '.img-preview'
  }

  // 1.3 创建裁剪区域
  $image.cropper(options)

  $("#chooseImageBtn").on('click',function(){
      $("#chooseImageInp").click()
  })
  $("#chooseImageInp").on('change',function(){
    let file=this.files[0]
    if (file===undefined) {
      return layui.layer.msg("头像上传不能为空")
    }
    let url=URL.createObjectURL(file)
     $image.cropper("destroy")
            .attr('src',url)
            .cropper(options)
  })
  $("#uploadBtn").on('click',function(){
    let dataURL=$image
    .cropper('getCroppedCanvas',{
      width:100,
      height:100
    })
    .toDataURL('image/png')
    axios({
      url:'/my/update/avatar',
      method:'post',
      //只编译dataURL，不要编译前面的属性和等号
      data:"avatar="+encodeURIComponent(dataURL)
    }).then(res=>{
      if (res.data.status!==0) {
        return layui.layer.msg(res.data.message)
      }
      layui.layer.msg("恭喜你，更改用户头像成功")
      window.parent.getUserInfo()
    });
  })
})